<!DOCTYPE HTML>
<html class="butler">
<head>
    <title>科寓共享家</title>
    <% include common/meta.ejs %>
    <% include common/public.ejs %>
    <%
//    let stateMap = {
//        '1': '空房中',
//        '2': '已租赁',
//        '3': '维修中',
//        '4': '异常',
//        '5': '已预订',
//        '6': '清扫中',
//    };
    let stateMap = {};
    var tempArray = data.houseStatus;
    for(let idx of tempArray.keys()){
        stateMap[tempArray[idx].code] = tempArray[idx].name;
    }
    let timeMap = {
        'all': '不限',
        'day_5': '5天内',
        'day_10': '10天内',
        'day_15': '15天内',
        'month_1': '一个月内',
    };

    %>
    <style>
        .changeHouseStatusBtn {
            color : black;
        }
    </style>
</head>
<body>

<div class="weui-pull-to-refresh-layer">
    <div class="pull-to-refresh-arrow"></div> <!-- 上下拉动的时候显示的箭头 -->
    <div class="pull-to-refresh-preloader"></div> <!-- 正在刷新的菊花 -->
    <div class="down">下拉刷新</div><!-- 下拉过程显示的文案 -->
    <div class="up">释放刷新</div><!-- 下拉超过50px显示的文案 -->
    <div class="refresh">正在刷新...</div><!-- 正在刷新时显示的文案 -->
</div>


<div class="weui_search_bar weui_search_focusing" id="search_bar">
    <form class="weui_search_outer">
        <div class="weui_search_inner">
            <i class="weui_icon_search"></i>
            <input type="search" class="weui_search_input" id="search_input" placeholder="搜索"
                   value="<%= data.condition.searchStr %>"/>
            <a href="butlerHouse?status=<%= data.condition.status %>&payLimit=<%= data.condition.payLimit %>&checkoutLimit=<%= data.condition.checkoutLimit %>"
               class="weui_icon_clear" id="search_clear"></a>
        </div>
        <label for="search_input" class="weui_search_text" id="search_text">
            <i class="weui_icon_search"></i>
            <span>搜索</span>
        </label>
    </form>
    <a href="javascript:" class="weui_search_cancel" id="search_cancel">搜索</a>
</div>

<div class="weui-row weui-no-gutter">
    <div class="weui-col-33" style="width:28% ">
        <a href="javascript:void(0)" class="topNav conditionState">
            <%= data.condition.status == '' ? '房屋状态' : stateMap[data.condition.status] %>
            <img class="downIcon" src="<%= global.config.publicPath %>/page/images/icon/butler/down24.png"/>
        </a>
    </div>
    <div class="weui-col-33" style="width:36% ">
        <a href="javascript:void(0)" class="topNav conditionCheckoutLimit">
            <%= data.condition.checkoutLimit == '' ? '退房时间' : timeMap[data.condition.checkoutLimit] + '退房' %>
            <img class="downIcon" src="<%= global.config.publicPath %>/page/images/icon/butler/down24.png"/>
        </a>
    </div>
    <div class="weui-col-33" style="width:36% ">
        <a href="javascript:void(0)" class="topNav conditionPayLimit">
            <%= data.condition.payLimit == '' ? '付款时间' : timeMap[data.condition.payLimit] + '付款' %>
            <img class="downIcon" src="<%= global.config.publicPath %>/page/images/icon/butler/down24.png"/>
        </a>
    </div>
</div>

<div class="Houseinfo"></div>

<div class="weui-infinite-scroll">
    <div class="infinite-preloader"></div><!-- 菊花 -->
    正在加载... <!-- 文案，可以自行修改 -->
</div>

<% let list = data.list; %>
<% for(var i = 0; i < list.length; i++){ %>
<div class="block">

        <h3>
            <span class="stateIcon"></span>
            <%= list[i].name %>
            <%
                let stateColor = list[i].status, stateText = list[i].statusName;
//                        if(list[i].status == '2' &&
//                            global.tool.string2date(list[i].contracts.endDate).getTime() < new Date().getTime() + 1000 * 60 * 60 * 24 * 5){
//                                stateText = '5天内退房';
//                                stateColor = 'warning';
//                        }else {
//                        }

                if (list[i].status == '2') {
                    stateColor = 'booked';
                } else {
                    stateColor = 'empty';
                }
            %>
            <span class="titleState <%= stateColor %>"><%= stateText %></span>
        </h3>
        <p>
            <span class="label">房号</span>
            <span><%= list[i].houseNumber %></span>
        </p>
        <p>
            <span class="label">房型</span>
            <span><%= list[i].houseTypeName %></span>
        </p>
        <p>
            <span class="label">床型</span>
            <span><%= list[i].beds %></span>
        </p>

        <% if(list[i].status != '2'){ %>
            <p>
                <span class="label">价格</span>
                <span><%= list[i].monthly %></span>
            </p>
            <p>
                <a href="javascript:void(0)" class="topNav conditionState">
                    <%= data.condition.status == '' ? '房屋状态' : stateMap[data.condition.status] %>
                    <img class="downIcon" src="<%= global.config.publicPath %>/page/images/icon/butler/down24.png"/>
                </a>
            </p>
            <p>
                <a href="javascript:changeHouseStatus(list[i].id);" class="weui_btn weui_btn_mini weui_btn_primary "><span class="changeHouseStatusBtn">更改房屋状态</span></a>
            </p>
        <% }else{ %>
            <hr style="margin-right: 40px"/>
            <p>
                <span class="label">租房时间</span>
                <span><%= list[i].startDate %> 至 <%= list[i].endDate %></span>
            </p>
            <p>
                <span class="label">租房人</span>
                <span><%= list[i].username %></span>
            </p>
            <p>
                <span class="label">联系电话</span>
                <span><%= list[i].phone %></span>
                <a class="telIcon" href="tel:<%= list[i].phone %>"></a>
            </p>
            <p>
                <a href="javascript:changeHouseStatus(list[i].id);" class="weui_btn weui_btn_mini weui_btn_primary "><span class="changeHouseStatusBtn">更改房屋状态</span></a>
            </p>
        <% } %>
        <a href="butlerContract?id=<%= list[i].id %>&&num?=<%= list[i].tatal %>">
            <span class="enterIcon"></span>
        </a>
    </div>
<% } %>

<% include common/footer.ejs %>
<script>
    'use strict';
    let pageSize = 10, pageNumber = 0;
    let loadingFlag;

    function formatterTimeCondition(str) {
        if (str.indexOf('_') > 0) {
            let condition = str.split('_');
            let type = condition[0], n = condition[1];
            let now = new Date();
            let date;
            switch (type) {
                case 'day':
                    date = new Date(now.getFullYear(), now.getMonth(), now.getDate() + n * 1);
                    break;
                case 'month':
                    date = new Date(now.getFullYear(), now.getMonth() + n * 1, now.getDate());
                    break;
            }
            return Dolphin.date2string(date, 'yyyy-MM-dd');
        }
        return '';
    }

    function setProperties(status, payLimit, checkoutLimit, searchStr) {
        let _status, _payLimit, _checkoutLimit, _searchStr = '', properties;

        if (status == 'all') {
            _status = '';
        } else {
            _status = status
        }
        _payLimit = payLimit;
        _checkoutLimit = checkoutLimit;
        _searchStr = searchStr;

        properties = {

            "status": _status,
            "payLimit": formatterTimeCondition(_payLimit),
            "checkoutLimit": formatterTimeCondition(_checkoutLimit),
            "searchStr": _searchStr

        }

        console.log(properties);
        return properties;
    }



    $('.conditionState').click(function () {
        $.actions({
            title: '请选择状态',
            actions: (function () {
                let items = [];
                items.push({
                    text: '不限',
                    onClick: function () {
                        location.href = CTX + `/view/butlerHouse?status=&payLimit=<%= data.condition.payLimit %>&checkoutLimit=<%= data.condition.checkoutLimit %>&searchStr=<%= data.condition.searchStr %>`;
                        setProperties(`all`, `<%= data.condition.payLimit %>`, `<%= data.condition.checkoutLimit %>`, `<%= data.condition.searchStr %>`);

                    }
                })
                <% for(let key in stateMap){ %>
                items.push({
                    text: '<%= stateMap[key] %>',
                    onClick: function () {
                        location.href = CTX + `/view/butlerHouse?status=<%= key %>&payLimit=<%= data.condition.payLimit %>&checkoutLimit=<%= data.condition.checkoutLimit %>&searchStr=<%= data.condition.searchStr %>`;
                        setProperties(`<%= key %>`, `<%= data.condition.payLimit %>`, `<%= data.condition.checkoutLimit %>`, `<%= data.condition.searchStr %>`);
                    }

                })
                <% } %>
                return items;
            })()
        });
    });

    $('.conditionPayLimit').click(function () {
        $.actions({
            title: '请选择时间',
            actions: (function () {
                let items = [];
                <% for(let key in timeMap){ %>
                items.push({
                    text: '<%= timeMap[key] %>',
                    onClick: function () {
                        location.href = CTX + `/view/butlerHouse?status=<%= data.condition.status %>&payLimit=<%= key %>&checkoutLimit=<%= data.condition.checkoutLimit %>&searchStr=<%= data.condition.searchStr %>`;
                        setProperties(`<%= data.condition.status %>`, `<%= key %>`, `<%= data.condition.checkoutLimit %>`, `<%= data.condition.searchStr %>`);
                    }
                })
                <% } %>
                return items;
            })()
        });
    });

    $('.conditionCheckoutLimit').click(function () {
        $.actions({
            title: '请选择时间',
            actions: (function () {
                let items = [];
                <% for(let key in timeMap){ %>
                items.push({
                    text: '<%= timeMap[key] %>',
                    onClick: function () {
                        location.href = CTX + `/view/butlerHouse?status=<%= data.condition.status %>&payLimit=<%= data.condition.payLimit %>&checkoutLimit=<%= key %>&searchStr=<%= data.condition.searchStr %>`;
                        setProperties(`<%= data.condition.status %>`, `<%= data.condition.payLimit %>`, `<%= key %>`, `<%= data.condition.searchStr %>`)

                    }
                })
                <% } %>
                return items;
            })()
        });
    });
    $('#search_cancel').click(function () {
        let searchStr = $('#search_input').val();
        location.href = CTX + `/view/butlerHouse?status=<%= data.condition.status %>&payLimit=<%= data.condition.payLimit %>&checkoutLimit=<%= data.condition.checkoutLimit %>&searchStr=${searchStr}`;
        setProperties(`<%= data.condition.status %>`, `<%= data.condition.payLimit %>`, `<%= data.condition.checkoutLimit %>`, `${searchStr}`)
    })

    $('.weui-infinite-scroll').css('display', 'none');

    $(document.body).infinite();

    $(document.body).infinite(50);
    var loading = false;  //状态标记
    $(document.body).infinite().on("infinite", function () {
        if (loading) return;
        loading = true;
        setTimeout(function () {
//            console.log(loadingFlag);
            if (!loadingFlag) {
                loadingData();
            }
            loading = false;

        }, 0);   //模拟延迟
    });

    $(document.body).pullToRefresh();

    $(document.body).on("pull-to-refresh", function () {
        //do something
        reloadingData();

    });

    $(document).ready(function () {
        loadingData();
    })

    function loadingData() {
        $('.weui-infinite-scroll').css('display', 'block');
        let properties = setProperties(`<%= data.condition.status %>`, `<%= data.condition.payLimit %>`, `<%= data.condition.checkoutLimit %>`, `<%= data.condition.searchStr %>`);
        loadingFlag = true;
        properties.pageSize = pageSize;
        properties.pageNumber = pageNumber;

        Dolphin.ajax({
            url: CTX + '/api/df74b88b17ac4af98cc16ceff930b450',
            type: 'post',
            data: Dolphin.json2string({
                properties
            }),
            forceUrl: 'true',
            onSuccess: function (data) {
                let list = data.rows;
                let contractId;
                console.log(list);
                let con = '';
                let id, houseNumber, houseType, houseTypeName, bedType, username, phone, houseName;
                let houseid;

                if (list.length == 0) {
                    con = `
                    <div style="text-align: center">
                         <i class="weui_icon_success_circle"></i>到底啦..</div>`
                    $('.Houseinfo').append(con);
                    $('.weui-infinite-scroll').css('display', 'none')
                    return
                }
                for (let i = 0; i <= list.length - 1; i++) {
                    houseid = list[i].id;


                    if (list[i].contract != null) {
                        contractId = list[i].contract.id;
                    } else {
                        contractId = undefined;
                    }
                    console.log(contractId);
                    let pkid = list[i].id;
                    let stateColor = list[i].status, stateText = list[i].statusName;
                    houseName = list[i].name;
                    houseNumber = list[i].houseNumber;
                    houseTypeName = list[i].houseTypeName;
                    if (list[i].beds[0]) {
                        if (list[i].beds[0].bedType == 'BED01') {
                            bedType = '单人床';
                        } else if (list[i].beds[0].bedType == 'BED02') {
                            bedType = '双人床';
                        }
                    }
                    if (list[i].contract) {
                        phone = list[i].contract.user.phone;
                        username = list[i].contract.user.name;
//                    console.log( phone);
                    }
                    if (list[i].status == '2') {
                        stateColor = 'booked';
                    } else {
                        stateColor = 'empty';
                    }

                    if (list[i].status != '2') {

                        con = con + `<div class="block">
                                        <h3>
                                            <span class="stateIcon"></span>
                                            ${houseName}

                                            <span class="titleState ${stateColor}">${stateText}</span>
                                        </h3>
                                        <p>
                                            <span class="label">房号</span>
                                            <span>${houseNumber}</span>
                                        </p>
                                        <p>
                                            <span class="label">房型</span>
                                            <span>${houseTypeName}</span>
                                        </p>
                                            <p>
                                            <span class="label">价格</span>
                                            <span>${list[i].monthly}</span>
                                        </p>
                                        <p>
                                         <a href="javascript:changeHouseStatus('${houseid}');" class="weui_btn weui_btn_mini weui_btn_primary "><span class="changeHouseStatusBtn">更改房屋状态</span></a>
                                        </p>
                                        <a href="butlerContract?id=${contractId}&&pkid=${pkid}&&houseId=${houseid}">
                                            <span class="enterIcon"></span>
                                        </a>
                                </div>`
                    } else {

                        con = con + `<div class="block">
                                        <h3>
                                            <span class="stateIcon"></span>
                                            ${houseName}

                                            <span class="titleState ${stateColor}">${stateText}</span>
                                        </h3>
                                        <p>
                                            <span class="label">房号</span>
                                            <span>${houseNumber}</span>
                                        </p>
                                        <p>
                                            <span class="label">房型</span>
                                            <span>${houseTypeName}</span>
                                        </p>
                                        <p>
                                            <span class="label">床型</span>
                                            <span>${bedType}</span>
                                        </p>

                                        <p>
                                            <span class="label">租房人</span>
                                            <span>${username }</span>
                                        </p>
                                        <p>
                                            <span class="label">联系电话</span>
                                            <span>${phone }</span>
                                            <a class="telIcon" href="tel:${phone}"></a>
                                        </p>
                                        <p>
                                         <a href="javascript:changeHouseStatus('${houseid}');" class="weui_btn weui_btn_mini weui_btn_primary "><span class="changeHouseStatusBtn">更改房屋状态</span></a>
                                        </p>
                                    <a href="butlerContract?id=${contractId}&&pkid=${pkid}&&houseId=${houseid}">
                                        <span class="enterIcon"></span>
                                    </a>
                                </div>`;
                    }

                }

                $('.Houseinfo').append(con);
                properties.pageNumber = pageNumber++;
//                console.log(pageNumber);
                loadingFlag = false;
                $('.weui-infinite-scroll').css('display', 'none');
                $(document.body).pullToRefreshDone();
            }
        });
    };

    function changeHouseStatus(houseId){
        $.actions({
            title: '更改房屋状态',
            actions: (function () {
                let items = [];
                <% for(let key in stateMap){ %>
                items.push({
                    text: '<%= stateMap[key] %>',
                    onClick: function () {

                        $.confirm("您确定更改房屋状态吗？", function() {
                            var obj = { properties : {
                                id : houseId,
                                status : `<%= key %>`
                            }
                            };
                            console.log(obj);
                            Dolphin.ajax({
                                url: CTX + '/api/567583907a244d1d90fc237c70d3c25e',
                                type: 'put',
                                data: Dolphin.json2string(obj),
                                forceUrl: 'true',
                                onSuccess: function (data) {
                                    location.href = CTX + '/view/butlerHouse';
                                }
                            });
                        }, function() {
                            //点击取消后的回调函数
                        });
                    }
                })
                <% } %>
                return items;
            })()
        });
    }

    function reloadingData() {
        let properties = setProperties(`<%= data.condition.status %>`, `<%= data.condition.payLimit %>`, `<%= data.condition.checkoutLimit %>`, `<%= data.condition.searchStr %>`);
        loadingFlag = true;
        let pageSize = 10;
        let pageNumber = 0;
        properties.pageSize = pageSize;
        properties.pageNumber = pageNumber;
        Dolphin.ajax({
            url: CTX + '/api/df74b88b17ac4af98cc16ceff930b450',
            type: 'post',

            data: Dolphin.json2string({
                properties
            }),
            forceUrl: 'true',
            onSuccess: function (data) {
                let list = data.rows;
                console.log(list);
                let con = '';
                let id, houseNumber, houseType, houseTypeName, bedType, username, phone, houseName;
                let pkid, contractId

                if (list.length == 0) {
                    con = `
                    <div style="text-align: center">
                         <i class="weui_icon_success_circle"></i>到底啦..</div>`
                    $('.Houseinfo').html(con);
                    $('.weui-infinite-scroll').css('display', 'none');
                    $(document.body).pullToRefreshDone();
                    return;
                }
                for (let i = 0; i <= list.length - 1; i++) {
                    pkid = list[i].id;

                    let stateColor = list[i].status, stateText = list[i].statusName;
                    houseName = list[i].name;
                    houseNumber = list[i].houseNumber;
                    houseTypeName = list[i].houseTypeName;
                    let houseId = list[i].id;
                    if (list[i].beds[0]) {

                        if (list[i].beds[0].bedType == 'BED01') {
                            bedType = '单人床';
                        } else if (list[i].beds[0].bedType == 'BED02') {
                            bedType = '双人床';
                        }
                    }

                    if (list[i].contract != null) {
                        phone = list[i].contract.user.phone;
                        username = list[i].contract.user.name;
                        contractId = list[i].contract.id
                    } else {
                        contractId = undefined;
                    }
                    ;
                    console.log(contractId);
                    if (list[i].status == '2') {
                        stateColor = 'booked';
                    } else {
                        stateColor = 'empty';
                    }

                    if (list[i].status != '2') {

                        con = con + `<div class="block">
                                        <h3>
                                            <span class="stateIcon"></span>
                                            ${houseName}

                                            <span class="titleState ${stateColor}">${stateText}</span>
                                        </h3>
                                        <p>
                                            <span class="label">房号</span>
                                            <span>${houseNumber}</span>
                                        </p>
                                        <p>
                                            <span class="label">房型</span>
                                            <span>${houseTypeName}</span>
                                        </p>
                                            <p>
                                            <span class="label">价格</span>
                                            <span>${list[i].monthly}</span>
                                        </p>
                                        <p>
                                          <a href="javascript:changeHouseStatus('${houseid}');" class="weui_btn weui_btn_mini weui_btn_primary "><span class="changeHouseStatusBtn">更改房屋状态</span></a>
                                        </p>

                                        <a href="butlerContract?id=${contractId}&&pkid=${pkid}&&houseId=${houseId}">
                                            <span class="enterIcon"></span>
                                        </a>
                                </div>`
                    } else {
                        con = con + `<div class="block">
                                    <h3>
                                        <span class="stateIcon"></span>
                                        ${houseName}

                                        <span class="titleState ${stateColor}">${stateText}</span>
                                    </h3>
                                    <p>
                                        <span class="label">房号</span>
                                        <span>${houseNumber}</span>
                                    </p>
                                    <p>
                                        <span class="label">房型</span>
                                        <span>${houseTypeName}</span>
                                    </p>
                                    <p>
                                        <span class="label">床型</span>
                                        <span>${bedType}</span>
                                    </p>

                                    <p>
                                        <span class="label">租房人</span>
                                        <span>${username }</span>
                                    </p>
                                    <p>
                                        <span class="label">联系电话</span>
                                        <span>${phone }</span>
                                        <a class="telIcon" href="tel:${phone}"></a>
                                    </p>
                                    <p>
                                      <a href="javascript:changeHouseStatus('${houseid}');" class="weui_btn weui_btn_mini weui_btn_primary "><span class="changeHouseStatusBtn">更改房屋状态</span></a>
                                    </p>
                                    <a href="butlerContract?id=${contractId}&&pkid=${pkid}&&houseId=${houseId}">
                                          <span class="enterIcon"></span>
                                     </a>
                                </div>

`;
                    }


                }
                $('.Houseinfo').html(con);
                properties.pageNumber = pageNumber++;
//                console.log(pageNumber);
                loadingFlag = false;
                $(document.body).pullToRefreshDone();

            }
        });
    };


</script>
</body>
</html>